<template>
  <div class="qr-code-container">
    <QRCodeVue
      :value="url"
      :size="size"
      :level="level"
      :background="background"
      :foreground="foreground"
      :class="customClass"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import QRCodeVue from "qrcode.vue";

interface QRCodeProps {
  url: string; // 二维码中包含的URL链接
  size?: number; // 二维码大小
  level?: string; // 二维码的纠错级别 'L', 'M', 'Q', 'H'
  background?: string; // 二维码背景色
  foreground?: string; // 二维码前景色
  customClass?: string; // 自定义样式类
}

const props = withDefaults(defineProps<QRCodeProps>(), {
  size: 200,
  level: "H",
  background: "#ffffff",
  foreground: "#000000",
  customClass: "",
});
</script>

<style scoped>
.qr-code-container {
  @apply flex items-center justify-center;
}
</style>
